<template>
  <div class="index_middle">
    <div class="index_middle_tags">
      返回 / 首页
    </div>
    <div class="index_middle_menu">
      <el-menu :default-active="activeIndex2" class="menu" mode="horizontal" @select="handleSelect"
        background-color="#CC1930" text-color="#fff" active-text-color="#ffd04b">
        <el-menu-item index="/index/indexHomePage">首页</el-menu-item>
        <el-menu-item index="/index/branchWork">支部工作</el-menu-item>
        <el-menu-item index="3">党风廉政</el-menu-item>
        <el-menu-item index="4">专项问题整改</el-menu-item>
        <el-menu-item index="5">党建品牌</el-menu-item>
        <el-menu-item index="6">纪检监督</el-menu-item>
        <el-menu-item index="7">党委班子</el-menu-item>
        <el-menu-item index="8">学习平台</el-menu-item>
        <el-menu-item index="9">大数据平台</el-menu-item>
        <el-menu-item index="10">系统管理</el-menu-item>
      </el-menu>
      <div class="index_middle_menu_bottom">
        <div class="index_middle_menu_bottom_box">
          <router-view />
        </div>
      </div>

    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data: {
    return () {

    }
  },
  methods: {
    handleSelect (key) {
      this.$router.push(key)
    }
  }

}
</script>

<style lang="less"  scoped>
.index_middle {
  display: flex;
  flex-direction: column;
  margin: auto;
  height: 100%;
}

.index_middle .index_middle_tags {
  position: absolute;
  margin-left: 5%;
  margin-top: -20px;
}

.index_middle .index_middle_menu {
  flex: 10;
  margin: auto;
  width: 90%;
  // border: 1px solid red;
  background-color: white;
}

.menu {
  display: flex;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.menu .el-menu-item {
  flex: 1;
  text-align: center;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.index_middle_menu_bottom {
  position: relative;
}

.index_middle_menu_bottom .index_middle_menu_bottom_box {
  padding: 1%;
}
</style>
